<template>
  <div class="transfer">
    <div class="transfer-title">Versuspk转账</div>
    <div class="transfer-field">
      <div class="transfer-field-title">可用Versuspk：{{available}}</div>
      <van-field type="tel" clearable v-model="form.phone" placeholder="请输入对方手机号" />
      <van-field
        type="number"
        center
        clearable
        v-model="form.num"
        placeholder="请输入转账数量"
        :border="false"
        @input="cNum"
        use-button-slot
      >
        <van-button class="all" slot="button" size="mini" @click="onArr">全部</van-button>
      </van-field>
    </div>
    <div class="transfer-field">
      <div class="transfer-field-title">安全验证</div>
      <van-field v-model="form.pwdtwo" clearable type="password" placeholder="请输入二级密码" />
    </div>
    <div class="transfer-btn">
      <van-button class="transfer-btn-reset" :loading="loading" size="large" @click="onSubmit">转账</van-button>
    </div>
  </div>
</template>

<script>
import * as reg from "../assets/reg.js";
import { onTrans } from "../../api/interface";
import { setTimeout } from 'timers';
export default {
  name: "transfer",
  data() {
    return {
      form: {
        phone: "",
        num: "",
        pwdtwo: ""
      },
      loading: false,
      available: 0
    };
  },
  computed: {
    countSum() {
      return "";
    }
  },
  mounted() {
    this.available = Number(this.$route.query.available) || 0
  },
  methods: {
    onSubmit() {
      if (this.loading) return;
      const regSubmit = reg.regSubmit(this.form);
      if (regSubmit) {
        this.$toast(regSubmit);
        return;
      }
      this.$dialog.confirm({
        title: '转账确认',
        message: `确认向用户:${this.form.phone}转账？`,
        beforeClose: (action, done) => {
          if (action === 'confirm') {
            this.onTrans(done)
          } else {
            done()
          }
        }
      });
    },
    onTrans (done) {
      onTrans({userId: this.$session.get().userid, ...this.form}).then(res => {
        done()
        this.available -= this.form.num;
        this.form.pwdtwo = ''
        this.$toast.success("转账成功");
        setTimeout(() => {
          this.$router.back(-1)
        }, 500)
      }).catch(() => {
        done()
      });
    },
    onArr() {
      this.form.num = this.available;
    },
    cNum(e) {
      this.form.num = Number(e);
      if (this.available >= 0) {
        if (e > this.available) {
          setTimeout(() => {
            this.form.num = this.available;
          }, 100);
          return;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.transfer {
  min-height: 100vh;
  background-image: linear-gradient(
    160deg,
    rgb(0, 147, 233) 0%,
    rgb(114, 218, 255) 100%
  );
  &-title {
    padding: 0.2rem 0.15rem;
    text-align: center;
    color: #fff;
    font-size: 0.3rem;
  }
  &-field {
    padding: 0 0.2rem 0.1rem 0.1rem;
    &-title {
      margin: 0.1rem 0;
      font-size: 0.18rem;
      font-weight: 600;
      color: #d8f0ff;
    }
    .all {
      color: #fff;
      border: 0 !important;
      background-color: #1399ea;
      box-shadow: 0 0.02rem 0.06rem #5ac7f9;
    }
  }
  .van-cell {
    padding: 0.1rem 15px;
    background-color: rgba(132, 204, 249, 0.6) !important;
  }
  &-result {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
  }
  &-btn {
    padding: 0 0.2rem;
    &-reset {
      display: block;
      width: 100%;
      height: calc(24px + 0.2rem);
      line-height: calc(24px + 0.2rem);
      margin-top: calc(24px + 0.2rem);
      font-size: 0.16rem;
      text-align: center;
      color: #fff;
      border: 0 !important;
      background-color: #1399ea;
      border-radius: 0.05rem !important;
      box-shadow: 0 0.02rem 0.06rem #5ac7f9;
    }
  }
}
</style>
